<template>
  <el-dialog
    v-bind="$attrs"
    width="500px"
    @close="handleClose"
    @open="handleOpen"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      size="small"
      label-suffix=":"
      label-width="150px"
    >
      <el-form-item :label="$t('operator.time_balance')">
        {{ remainTime }} {{ $t('common.time.minutes') }}
      </el-form-item>
      <el-form-item :label="$t('operator.chnnel_balance')">
        {{ remainChnl }} {{ $t('operator.remainingChnl') }}
      </el-form-item>
      <el-form-item :label="$t('operator.channel_type')" prop="radio">
        <el-radio-group v-model="form.radio">
          <div v-for="item in channelList" class="mt-2">
            <el-radio :key="item.resType" :label="item">{{
              $t('operator.' + item.resType)
            }}</el-radio>
          </div>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('operator.quantity')" prop="quantity">
        <el-input-number v-model="form.quantity" :min="1" :max="99999" />
      </el-form-item>
      <el-form-item :label="$t('operator.effectDate')" prop="effectTimestamp">
        <el-date-picker
          v-model="form.effectTimestamp"
          type="date"
          :placeholder="$t('operator.selectEffectTip')"
          format="YYYY-MM-DD"
          value-format="timestamp"
        />
      </el-form-item>
      <el-form-item :label="$t('operator.remark')">
        <el-input
          v-model="form.remark"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 10 }"
          maxlength="64"
          show-word-limit
          clearable
          @blur="() => (form.remark = form.remark.trim())"
        />
      </el-form-item> </el-form
    ><template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="handleClose">{{
          $t('common.cancel')
        }}</el-button>
        <el-button
          type="primary"
          size="small"
          :loading="dataListLoading"
          @click="clickHandle"
          >{{ $t('common.confirm') }}</el-button
        >
      </span></template
    >
  </el-dialog>
</template>

<script>
import { formatDate } from '@/utils/formatDate'
import { getLicenseList, addLicense } from '@/api/operator'
export default {
  props: {
    operatorId: {
      require: true,
      type: String,
      default: null
    },
    remainTime: {
      require: true,
      type: Number,
      default: 0
    },
    remainChnl: {
      require: true,
      type: Number,
      default: 0
    }
  },
  data() {
    const licenseValidate = (rule, value, callback) => {
      console.log(value)
      if (!value) {
        return callback(new Error(this.$t('operator.licenseEmptyCheck')))
      } else {
        callback()
      }
    }
    const quantityValidate = (rule, value, callback) => {
      console.log(value)
      if (value <= 0) {
        return callback(new Error(this.$t('operator.quantityCheck')))
      } else if (value === undefined) {
        return callback(new Error(this.$t('common.nullInputTip')))
      } else {
        callback()
      }
    }
    const effectTimeValidate = (rule, value, callback) => {
      console.log(value)
      if (value <= 0) {
        return callback(new Error(this.$t('operator.effectTimeCheck')))
      } else {
        callback()
      }
    }
    return {
      dataListLoading: false,
      licenseList: [],
      channelList: [],
      bizCode: 'BIZ-FLY-DESKTOP',
      form: {
        radio: {},
        quantity: 1,
        effectTimestamp: '',
        remark: ''
      },
      rules: {
        license: [
          { required: true, validator: licenseValidate, trigger: 'change' }
        ],
        quantity: [
          { required: true, validator: quantityValidate, trigger: 'change' }
        ],
        effectTimestamp: [
          { required: true, validator: effectTimeValidate, trigger: 'change' }
        ],
        radio: [
          { required: true, validator: licenseValidate, trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getLicenses()
  },
  methods: {
    handleOpen() {
      this.form.effectTimestamp = new Date().getTime()
    },
    handleClose() {
      this.$refs.form.resetFields()
      this.form.quantity = 1
      this.form.effectTimestamp = ''
      this.form.remark = ''
      this.$emit('update:model-value', false)
    },
    formatDate(row, column, cellValue, index) {
      return formatDate(cellValue, 'YYYY-MM-DD')
    },
    getLicenses() {
      getLicenseList()
        .then((data) => {
          this.licenseList = data.slice(2)
          this.channelList = data.slice(0, 2)
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    clickHandle() {
      const param = {
        platform: 'toms',
        subjectType: 'OPERATOR',
        subjectId: this.operatorId,
        resType: this.form.radio.resType,
        resPackageCode: this.form.radio.resPackageCode,
        effectTime: this.form.effectTimestamp / 1000,
        quantity: this.form.quantity,
        totalAmount: 0,
        orderRemark: this.form.remark
      }
      if (param.resType == null || param.resPackageCode == null) {
        this.$message({
          type: 'error',
          message: this.$t('operator.licenseEmptyCheck')
        })
        return
      }
      if (param.quantity < 1) {
        this.$message({
          type: 'error',
          message: this.$t('operator.quantityCheck')
        })
        return
      } else if (param.quantity === undefined) {
        this.$message({
          type: 'error',
          message: this.$t('common.nullInputTip')
        })
        return
      }
      if (param.effectTime === 0) {
        this.$message({
          type: 'error',
          message: this.$t('operator.effectTimeCheck')
        })
        return
      }
      console.log(param)
      this.$confirm(this.$t('operator.addLicenseConfirm'), '', {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        this.dataListLoading = true
        addLicense(param, this.bizCode)
          .then((data) => {
            this.dataListLoading = false
            this.$message({
              type: 'success',
              message: this.$t('common.success')
            })
            this.$emit('confirm')
            this.handleClose()
          })
          .catch((e) => {
            this.$confirmError(e)
            this.dataListLoading = false
            this.handleClose()
          })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.l-card {
  margin: 20px 36px;
}
</style>
